<template><!-- 跟元素只能有一个 -->
	<div class="home">
		 <!-- 标题栏 -->
	    <header class="bar-nav header-home">
	        <!-- <div class="bar bar-header-secondary"> -->
			  <div class="searchbar">
			  	 <router-link to="/city" class="left">广州  <span class="icon icon-down "></span></router-link>
			    <router-link to="/sousuo" class="search-input home-input">
			      <label class="icon icon-search" for="search"></label>
			      <input  type="search" id='search' placeholder='输入关键字...'/>
			    </router-link>
			   <!--   <router-link to="/login"><img src="./images/xinxi.png" alt=""> </router-link> -->
			  </div>
			<!-- </div> -->
	    </header>
	    <!-- 大图滚动 -->
		<swper1></swper1>
		<div class="ad1"><img v-bind:src="ad1"></div>
		<!-- 图标 -->
		<!-- <theme></theme> -->
		<div class="theme row no-gutter">
			<router-link v-bind:to="item.tianUrl" class="col-25"  v-for="item in themeList" >
			    <img v-bind:src="item.imgsrc">
			    <span class="tab-label">{{item.title}}</span>
			</router-link>
		</div>
		<!-- top10 -->
		<div class="TOP10">
			<img src="http://img12.yiguoimg.com/e/items/2017/170120/9288700561334836_1125x408.jpg">
			<div><img v-for="item in TOPItems" v-bind:src="item.imgsrc" alt=""></div>
		</div>
		<!-- new -->
		<div class="new" v-for="(arr,key,i) in homeList1">
			<img v-bind:src="middleList[i]" alt="">
			<!-- <slidesSwper></slidesSwper> -->
			<!-- 左右滚动 -->
			<div class="swiper-container swper2">
			    <div class="swiper-wrapper">
			        <div v-on:click="look(obj.id)" class="swiper-slide slides-i" v-for="obj in arr">
			        <router-link to="/product">
			        	<img v-bind:src="obj.img">
						<span class="newName">{{obj.name}}</span>
						<span class="newPrice"><strong>¥{{obj.price}}</strong>{{obj.units}}</span>
			        </router-link>
			        </div>
			        <a href="###" class="home-more">查看更多</a>
			    </div>
			</div>
		</div>
		<!-- 产品区 -->
		<div class="productList" v-for="(arr,key,i) in homeList2">
		<h3>{{homeList2[key][i].type1}}</h3>
		<div class="row">
			<div class="col-50 productA" v-for="obj in arr" v-on:click="look(obj.id)" >
			    <router-link to="/product">
				    <img v-bind:src="obj.img"> 
					<span class="newName">{{obj.name}}</span>
					<span class="newPrice"> <strong>¥{{obj.price}}</strong>{{obj.units}}</span>
				</router-link>
			 </div>
		</div>
		</div>

		<!-- <imgtxt></imgtxt> -->
		<!-- 返回顶部 -->
		<goTop></goTop>
	
	</div>
</template>
<script type="text/javascript">
import Swper1 from "../../components/swper.vue" ;
import GoTop from "../../components/goTop.vue" ;

export default {
	components:{
		// 组件注册
		Swper1,
		GoTop,
		scrollTop:0,
		index:0,

	},
	data(){
		return{
			themeList:[
				{tianUrl:"/huiyan",title:"会员签到",imgsrc:"http://img09.yiguoimg.com/e/items/2017/170212/9570175994438220_144.png"},
				{tianUrl:"/tltq",title:"团来团趣",imgsrc:"http://img09.yiguoimg.com/e/items/2017/170212/9570175994470988_144.png"},
				{tianUrl:"/yihe",title:"易盒家宴",imgsrc:"http://img12.yiguoimg.com/e/items/2017/170212/9570175994503756_144.png"},
				{tianUrl:"/youhui",title:"优惠券",imgsrc:"http://img14.yiguoimg.com/e/items/2017/170212/9570175994536524_144.png"},
				{tianUrl:"/xinpin",title:"新品尝鲜",imgsrc:"http://img12.yiguoimg.com/e/items/2017/170212/9570175994569292_144.png"},
				{tianUrl:"/remai",title:"热卖排行",imgsrc:"http://img12.yiguoimg.com/e/items/2017/170212/9570175994602060_144.png"},
				{tianUrl:"/yinhang",title:"银行活动",imgsrc:"http://img12.yiguoimg.com/e/items/2017/170212/9570175994634828_144.png"},
				{tianUrl:"/qiye",title:"企业福利",imgsrc:"http://img12.yiguoimg.com/e/items/2017/170212/9570175994667596_144.png"},
			],
			ad1:"http://img12.yiguoimg.com/e/items/2017/170214/9288701062881870_1125x344.jpg",
			TOPItems:[
				{imgsrc:"http://img11.yiguoimg.com/e/items/2017/170204/9288700845564484_552x408.jpg"},
				{imgsrc:"http://img12.yiguoimg.com/e/items/2017/170204/9288700845597252_552x408.jpg"},
			],
			middleList:["http://img10.yiguoimg.com/e/items/2017/170116/9288700394742320_1125x652.jpg",
				"http://img12.yiguoimg.com/e/items/2017/170215/9288701092209231_1125x652.jpg",
				"http://img14.yiguoimg.com/e/items/2017/170216/9288701113541200_1125x652.jpg",
				"http://img10.yiguoimg.com/e/items/2017/170217/9288701137134161_1125x652.jpg",
				"http://img12.yiguoimg.com/e/items/2017/170216/9288701115834960_1125x652.jpg"
			],
			homeList1:{},
			homeList2:{},

		}
	},
	created(){
		var _this=this;
		$.ajax({
			type:"get",
			url:"http://localhost:8088/shop2/getHomeSj.php",
			data:{type:'homeList1'},
			dataType:"json",
			success:function(data){
				_this.homeList1=data;
				// console.log(data);
				setTimeout(function(){
					var mySwiper = new Swiper ('.swper2', {
					   		 direction: 'horizontal',
					    	 // loop: true,
					   		 slidesPerView : 3.5,
					   		 onTouchEnd: function(swiper){
					   		 	if(swiper.activeIndex){
									console.log("加载更多..");
					   		 	}
						    }
						 })   
				},10);	
			}
		});
		$.ajax({
			type:"get",
			url:"http://localhost:8088/shop2/getHomeSj.php",
			data:{type:'homeList2'},
			dataType:"json",
			success:function(data){
				_this.homeList2=data;
			}
		});
	},
	mounted(){
		// console.log(this.middleList[0]);
    	$(".cartNone").show();
		// console.log(global.cartsj.length);
		
		},
	methods:{
		look:function(id){
			localStorage.setItem("proId",id);
		}
	}
}

</script>
<style type="text/css">
.home{
	font-size: 12px;
	padding-top: 2.2rem;

}
/*头部*/
.searchbar{
		display: flex;
		justify-content: space-around;
	}
	.left{
		display: inline-block;
		width: 13%;
		vertical-align: text-top;
		color: white;
		font-size: 0.5rem;
	}
	.left>span{
		width: auto;
		vertical-align: text-top;
	}
	.header-home{
		background: -webkit-linear-gradient(left,#35da84 60%,#0fb37b);
		color: white;
		position: fixed;
		width: 100%;
		z-index: 10;
		/*top: 0;*/
		/*left: 0;*/
	}
	#search{
		background: rgba(255,255,255,0.3);
		border-radius: 20px;
		border:none;
	}
	.home-input{
		display: inline-block;
		width: 80%!important;
		vertical-align:top;
	}
/*广告1*/
.ad1,.ad1 img{
	width: 100%;
}
/*图标*/
.theme{
		background: white;
		text-align: center;
	}
	.theme a{
		color: #666;
		padding: 0.3rem 0rem 0.5rem;
	}
	.theme a img{
		width: 50%;
	}
	.theme a span{
		display: block;
	}
/*top10*/
.TOP10,.TOP10>img,.TOP10>div{
	width: 100%;
}
.TOP10>img{
	margin: 0.3rem 0rem;
}

.TOP10>div>img{
	width: 49.3%;
}
.TOP10>div>img:nth-child(2){
  margin-left: 1.4%;
}
/*new*/
.new{
	margin-top: 0.3rem;
	background: white;
}
.new,.new>img{
	width: 100%;
	padding: 0.5rem 0;
}
/*左右滚动*/
.slides-i{
	width: 25%;
text-align: center;
color: #8d8d8d;
height: 100%;
padding-bottom: 1rem;
}
.slides-i a{
	color: #8d8d8d;
}
.newName{
	display: block;
	width: 100%;
	overflow: hidden;
	/*段落省略...*/
	text-overflow: ellipsis;
	color: #666;
	white-space:nowrap; 
}
.newPrice strong{
	color: red;
}
.home-more{
	padding:1.5rem 0.5rem 0rem;
	color: #8d8d8d;
}
/*产品区*/
.productList{
		background: white;
		margin-top: 0.3rem;
		text-align: center;
	}
	.productList h3{
		padding-top: 1rem;
	}
	.productList h3::before,.productList h3::after{
		content: "";
		display: inline-block;
		width: 0.3rem;
		height: 20px;
		background: url(./images/ttimg.png)no-repeat -30px 12px;
		margin: 0rem 0.5rem;
	}
	.productA{
		padding-top: 1rem;
	}
	.productA img{
		width: 80%;
	}
	.newPrice strong{
		margin-right: 5px;
	}
	.productA a{
		color: #8d8d8d;
	}

</style>
